<div class="da-list-wrap">
  <div class="da-content-wrapper">
    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="24">
        <div class="da-list-container">
          <d-row [dGutter]="[12, 12]" [dGutterNoOuter]="true" [dAlign]="'center'">
            <d-col [dSpan]="20">
              <d-row [dGutter]="[12, 12]" [dGutterNoOuter]="true" [dAlign]="'center'">
                <d-col>
                  <div class="da-header-item-label">{{ 'stdata.srcDataSetTypeCode' | translate }}:</div>
                </d-col>
                <d-col>
                  <input
                    dTextInput
                    name="srcDataSetTypeCode"
                    [(ngModel)]="searchFormConfig.srcDataSetTypeCode"
                    (keyup.enter)="refreshTable()"
                  />
                </d-col>
                <d-col>
                  <div class="da-header-item-label">{{ 'stdata.tgtDataSetTypeCode' | translate }}:</div>
                </d-col>
                <d-col>
                  <input
                    dTextInput
                    name="tgtDataSetTypeCode"
                    [(ngModel)]="searchFormConfig.tgtDataSetTypeCode"
                    (keyup.enter)="refreshTable()"
                  />
                </d-col>
                <d-col>
                  <div class="da-header-item-label">{{ 'stdata.srcDataSetCode' | translate }}:</div>
                </d-col>
                <d-col>
                  <input dTextInput name="srcDataSetCode" [(ngModel)]="searchFormConfig.srcDataSetCode" (keyup.enter)="refreshTable()" />
                </d-col> </d-row
            ></d-col>
            <d-col [dSpan]="4" style="text-align: end">
              <d-button-group>
                <d-button style="margin-right: 8px" bsStyle="primary" (btnClick)="refreshTable()">{{
                  'app.common.operate.query.label' | translate
                }}</d-button>
                <d-button style="margin-right: 8px"  bsStyle="common" (btnClick)="reset()">{{ 'app.common.operate.reset.label' | translate }}</d-button>
                <d-button icon="icon-chevron-down" bsStyle="text" *ngIf="!isOpen" (btnClick)="buttonToggle(true)">
                  {{ 'app.common.operate.unpack.label' | translate }}
                </d-button>
                <d-button icon="icon-chevron-up" bsStyle="text" *ngIf="isOpen" (btnClick)="buttonToggle(false)">
                  {{ 'app.common.operate.packup.label' | translate }}
                </d-button>
              </d-button-group>
            </d-col>
          </d-row>

          <d-row [dGutter]="[12, 12]" [dGutterNoOuter]="true" [dAlign]="'center'" style="padding-top: 6px" *ngIf="isOpen">
            <d-col [dSpan]="20">
              <d-row [dGutter]="[12, 12]" [dGutterNoOuter]="true" [dAlign]="'center'">
                <d-col>
                  <div class="da-header-item-label">{{ 'stdata.tgtDataSetCode' | translate }}:</div>
                </d-col>
                <d-col>
                  <input dTextInput name="tgtDataSetCode" [(ngModel)]="searchFormConfig.tgtDataSetCode" (keyup.enter)="refreshTable()" />
                </d-col>
                <d-col>
                  <d-checkbox
                    name="auto"
                    [isShowTitle]="false"
                    [label]="checkboxLabel"
                    (change)="refreshTable()"
                    [(ngModel)]="searchFormConfig.auto"
                  >
                  </d-checkbox>
                </d-col>
              </d-row>
            </d-col>
          </d-row>
        </div>
      </d-col>
    </d-row>

    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="24">
        <div class="da-list-container">
          <div class="da-list-header">
            <div class="header-left"></div>
            <div class="header-right">
              <d-button-group>
                <d-button
                  *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.stdataRefDataMapAdd)"
                  bsStyle="primary"
                  (btnClick)="openAddDataMapDialog()"
                  >{{ 'app.common.operate.new.label' | translate }}</d-button
                >
                <d-button
                  *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.stdataRefDataMapDelete)"
                  bsStyle="common"
                  (btnClick)="openDeleteDataMapDialog(dataTable.getCheckedRows())"
                  [disabled]="!dataTableChecked"
                  >{{ 'app.common.operate.delete.label' | translate }}</d-button
                >
              </d-button-group>
            </div>
          </div>
          <div class="list-content" id="dataTableContent">
            <d-data-table
              #dataTable
              [dataSource]="dataTableDs"
              [resizeable]="true"
              [checkable]="true"
              [tableLayout]="'fixed'"
              [scrollable]="true"
              [fixHeader]="true"
              (rowCheckChange)="getDataTableCheckedStatus()"
              (checkAllChange)="getDataTableCheckedStatus()"
            >
              <d-column
                field="srcDataSetTypeCode"
                header="{{ 'stdata.srcDataSetTypeCode' | translate }}"
                [width]="'180px'"
                [fixedLeft]="'36px'"
              >
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="srcDataSetTypeName" header="{{ 'stdata.srcDataSetTypeName' | translate }}" [width]="'180px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="srcDataSetCode" header="{{ 'stdata.srcDataSetCode' | translate }}" [width]="'160px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="srcDataSetValue" header="{{ 'stdata.srcDataSetValue' | translate }}" [width]="'160px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="tgtDataSetTypeCode" header="{{ 'stdata.tgtDataSetTypeCode' | translate }}" [width]="'180px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="tgtDataSetTypeName" header="{{ 'stdata.tgtDataSetTypeName' | translate }}" [width]="'180px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="tgtDataSetCode" header="{{ 'stdata.tgtDataSetCode' | translate }}" [width]="'160px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="tgtDataSetValue" header="{{ 'stdata.tgtDataSetValue' | translate }}" [width]="'160px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="remark" header="{{ 'stdata.remark' | translate }}" [width]="'200px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="createTime" header="{{ 'stdata.createTime' | translate }}" [width]="'180px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem | date: 'yyyy-MM-dd HH:mm:ss' }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="updateTime" header="{{ 'stdata.updateTime' | translate }}" [width]="'180px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem | date: 'yyyy-MM-dd HH:mm:ss' }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="actions" header="{{ 'app.common.operate.label' | translate }}" [fixedRight]="'0px'" [width]="'120px'">
                <d-cell>
                  <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                    <div class="btn-group over-flow-ellipsis">
                      <d-button
                        *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.stdataRefDataMapDelete)"
                        icon="icon-delete"
                        bsStyle="text-dark"
                        (btnClick)="openDeleteDataMapDialog([rowItem])"
                        [disabled]="!rowItem.id"
                        title="{{ 'app.common.operate.delete.label' | translate }}"
                      ></d-button>
                    </div>
                  </ng-template>
                </d-cell>
              </d-column>
              <ng-template #noResultTemplateRef>
                <div style="text-align: center; margin-top: 20px">{{ 'app.common.noRecord' | translate }}</div>
              </ng-template>
            </d-data-table>
          </div>
          <div class="da-list-footer">
            <div class="footer-left"></div>
            <div class="footer-right">
              <d-pagination
                size=""
                [total]="pager.total"
                [(pageSize)]="pager.pageSize"
                [(pageIndex)]="pager.pageIndex"
                [canViewTotal]="true"
                [canChangePageSize]="true"
                [canJumpPage]="true"
                [maxItems]="5"
                (pageIndexChange)="refreshTable()"
                (pageSizeChange)="refreshTable()"
              >
              </d-pagination>
            </div>
          </div>
        </div>
      </d-col>
    </d-row>
  </div>
</div>
